<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="jquery.mobile.css" />
    <link rel="icon" type="image/png" href="cam2web.png" />
    <script src="camera.js"></script>
    <script src="cameraproperties.js"></script>
    <script src="jquery.js"></script>
    <script>
    $(document).bind('mobileinit', function () {
        $.mobile.activeBtnClass = 'unused';
    });
    </script>
    <script src="jquery.mobile.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="b">
    <h1 id="title">Web Camera</h1>
    <a href="#" id="settingsButton" data-icon="gear" class="ui-btn-right">Settings</a>
</div>

<div data-role="content">

<div id="cameracontainer">
    <img id="camera" width="320" height="240">
</div>

<div id="cameraproperties" style="display: none;">
</div>

</div>

</div>

<script>

function getCameraInfo( )
{
    $.ajax( {
        type        : "GET",
        url         : "/camera/info",
        contentType : "application/json; charset=utf-8",
        async       : true,
        success: function( data )
        {
            if ( data.status == "OK" )
            {
                var title       = "";
                var config      = data.config;
                var cameraWidth = parseInt( config.width );

                if ( ( config.title ) && ( config.title.length != 0 ) )
                {
                    title = config.title;
                }
                else
                {
                    title = config.device;
                }

                $('#camera').width( config.width );
                $('#camera').height( config.height );

                $('#cameracontainer').width( cameraWidth + 20 );
                $('#cameraproperties').css( { 'margin-left' : cameraWidth + 40 } );

                $('#title').html( title.replace( "<", "&lt;" ).replace( ">", "&gt;" ) );
                document.title = 'web2cam :: ' + title;
            }
        },
        failure: function( errMsg )
        {
            console.log( errMsg );
        }
    } );
}

function getVersionInfo( )
{
    $.ajax( {
        type        : "GET",
        url         : "/version",
        contentType : "application/json; charset=utf-8",
        async       : true,
        success: function( data )
        {
            if ( ( data.status == "OK" ) && ( data.config.version ) )
            {
                $('#version').html( " :: " + data.config.version );
            }
        }
    } );
}

var showingSettings = false;

// Load camera settings controls
function showSettings( )
{
    if ( !showingSettings )
    {
        var timeNow = new Date( ).getTime( );

        $.ajax({
            url: '/cameraproperties.html?=' + timeNow,

            success: function(data)
            {
                $( "#cameraproperties" ).html( data ).trigger( 'create' );
                $( "#cameraproperties" ).show( );

                $( "#settingsButton" ).addClass( 'ui-btn-active' );
                showingSettings = true;
            }
        });
    }
    else
    {
        $( "#cameraproperties" ).hide( );
        $( "#settingsButton" ).removeClass( 'ui-btn-active' );
        showingSettings = false;
    }

    $( "#settingsButton" ).blur( );

    return false;
}

document.getElementById( 'settingsButton' ).onclick = showSettings;

// get camera information like name, width, height
//getCameraInfo( );
// get version of the streamer
//getVersionInfo( );
// start camera (it defaults to MJPEG; but if it fails back to JPEG, then try keeping 30 fps rate)
Camera.Start( 30 );

</script>
</body>
</html>
